<template>
	<view class="_circle-item">
		<view class="u-flex u-flex-between u-flex-items-center">
			<view class="u-flex">
				<u-avatar :src="info.easyUser.avatar"></u-avatar>
				<view class="u-m-l-12">
					<view class="f-s-14 u-m-b-12 f-w-ber">
						{{ info.easyUser.nickName }}
					</view>
					<view class="f-s-12 u-info"><text>发布于</text>{{ timeFrom(info.timestamp,false) }}</view>
				</view>
			</view>
			<view v-if="active !=2">
				<u-button v-if="!info.isFollow " text="+关注" size="small" :customStyle="{
					width: '60px',
					height: '28px',
					borderRadius: '8px',
					background: 'rgba(32, 128, 247, 1)',
					color: '#fff'
				}" @click="followUser(info.userId)">
				</u-button>
				<u-button v-else text="已关注" size="small" :customStyle="{
					width: '60px',
					height: '28px',
					borderRadius: '8px',
					background: '#ccc',
					color: '#666'
				}" @click="followUser(info.userId)"></u-button>
			</view>
			<view v-else>
				<tag text="未通过审核" v-if="info.status==-1" background="#f56c6c" color="#fff"></tag>
				<tag text="待审核" v-if="info.status==0"></tag>
			</view>
		</view>
		<view class="f-s-14 u-m-t-32">
			{{ info.content }}
		</view>
		<view class="u-m-t-32" v-if="info.imagesList && info.imagesList.length > 0">
			<u-album class="album-wrap" :urls="info.imagesList" :space="12" :multipleSize="80"></u-album>
		</view>
		<view class="u-m-t-32 u-flex u-flex-between">
			<u-icon color="#86909C" labelColor="#86909C" name="map" labelSize="12" size="14"
				:label="info.address || '位置已隐藏'"></u-icon>
			<view class="u-flex">
				<u-icon color="#f56c6c" labelColor="#86909C" name="trash" labelSize="12" size="18"
					v-if="userId==info.userId" @click="del(info.id)"></u-icon>
				<view class="u-m-l-16">
					<u-icon color="#86909C" labelColor="#86909C" name="edit-pen" labelSize="12" size="18"
						v-if="userId==info.userId" @click="editCircle(info.id)"></u-icon>
				</view>
				<!-- <view class="u-m-l-16">
					<u-icon color="#86909C" labelColor="#86909C" name="share-square" labelSize="12" size="18"
						:label="info.share"></u-icon>
				</view> -->
				<view class="u-m-l-16">
					<u-icon color="#86909C" labelColor="#86909C" name="thumb-up" labelSize="12" size="18" :label="info.zan"
						@click="add(info.id)"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
	} from 'vue';
	import {
		timeFrom
	} from 'uview-plus';
	import tag from '@/components/tag.vue'
	import {
		showConfirm,
		toast
	} from '@/utils/common.js'
	import {
		addFollow,
		delFollow
	} from '@/api/follow.js'
	import store from '../store';
	import {
		circleDel,
		addZan,
		addInterest,
		cancelInterest
	} from '@/api/circle.js'
	const emit = defineEmits(['getList']);
	
	const props = defineProps({
		info: {
			type: Object,
			default: {}
		},
		active: Number
	})
	const userId = store.getters.userId
	/**
	 * 关注用户
	 */
	function followUser(userId) {
		if (!props.info.isFollow) {
			//关注
			addInterest(userId).then(res => {
				toast("关注成功")
				props.info.isFollow = !props.info.isFollow
			})
			return;
		}
		//取消关注
		cancelInterest(userId).then(res => {
			toast("取消关注")
			props.info.isFollow = !props.info.isFollow
		})
	}

	function add(id) {
		addZan(id).then(resp => {
			props.info.zan++
		})
	}
	function del(e) {
		showConfirm("是否删除此数据").then(res => {
			if (res.confirm) {
				circleDel(e).then(res => {
					toast('删除成功')
					emit('getList');
				})
			}
		})

	}

	function editCircle(id) {
		uni.navigateTo({
			url: '/subPackages/circle/push_circle?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	._circle-item {
		background: #fff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 20px;
		margin-top: 12px;
	}

	::v-deep .album-wrap image {
		border-radius: 12px !important;
	}

	::v-deep .u-album__row__wrapper image {
		border-radius: 12px !important;
	}
</style>